import React, { useState, useEffect } from "react";
import image1 from "@/assets/b1.jpg";
import image2 from "@/assets/b2.jpg";
import image3 from "@/assets/b3.jpg";
import image4 from "@/assets/b4.jpg";
import image5 from "@/assets/b5.jpg";
import image6 from "@/assets/b6.jpg";
import "./index.less";

/**
 * change Background picture pre 3 sec.
 * @constructor
 */
const RenderBack: React.FC = () => {
  const [currentImageIndex, setImageIndex] = useState<number>(0);
  const [prevImageIndex, setPrevImageIndex] = useState<number>(6);
  const changeBackgroundPicPerSec: number = 3;
  const images: Array<string> = [
    image1,
    image2,
    image3,
    image4,
    image5,
    image6,
  ];
  useEffect(() => {
    const intervalSetImage = setInterval(() => {
      setPrevImageIndex(currentImageIndex);
      setImageIndex((currentImageIndex) => (currentImageIndex + 1) % 6);
      // console.log(currentImageIndex, prevImageIndex);
    }, 1000 * changeBackgroundPicPerSec);
    return () => {
      clearInterval(intervalSetImage);
    };
  }, []);

  useEffect(() => {
    // document.body.style.backgroundImage = `url(${images[currentImageIndex]})`;
    document.body.style.setProperty(
      "--prev-bg",
      `url(${images[prevImageIndex]})`
    );
    document.body.style.setProperty(
      "--current-bg",
      `url(${images[currentImageIndex]})`
    );
  }, [currentImageIndex, prevImageIndex]);

  return null;
};

export default RenderBack;
